import React, {Children, createElement, useRef, useState} from 'react';
import Democonp from "./democonp";
import Shell from "./shell";
import {Input} from "antd";



function Containerx(props) {
    // console.log('props.Children',props.children);
    // console.log('props.Children.map',Children.map(props.children, item => console.log('item,map',item)));
    // console.log('props.Children.map',Children.map(props.children, item => [item,] ));
    createElement('button', {
        onClick: () => {
            console.log(Children.map(props.children, item => [item,]));
        }
    }, '获取参数')
    return [props.children,createElement('button', {
        onClick: () => {
            console.log(Children.map(props.children,function (value) {
                return value;
            }));
            console.log("Children.toArray",Children.toArray(props.children));
        }
    }, '获取参数')]
}

function Conpoments(props) {
    const [cl,setCl]=useState([
        {type:Input,
            props:{
                onChange: (e) => {
                    console.log(e.target.value);
                },
                defaultValue: Math.random()
            }
        },
        {type:Input,
            props:{
                onChange: (e) => {
                    console.log(e.target.value);
                },
                defaultValue: Math.random()
            }
        },
    ])

    const zzzz=useRef([])
    const [arr,setArr]=useState([
        {big:123,small:4567},
        {big:6457,small:12},
        {big:234,small:345},
        {big:756,small:347},
        {big:123,small:1346},
    ])


    const demo=React.createFactory(Shell)
    const component_list= [
        {type:Input,
        props:{
            onChange: (e) => {
                console.log(e.target.value);
            },
            defaultValue: Math.random()
        }
        },
        {type:Input,
        props:{
            onChange: (e) => {
                console.log(e.target.value);
            },
            defaultValue: Math.random()
        }
        },
    ]


    const list=[{big:'123'},{big:'234'},{small:'123'}]
    const [i,setI]=useState(0)
    const no=()=>{
        setI(i+1)
        console.log("i", i);
        return i
    }

    return (
        <Containerx>
            {arr.map((item,key)=>{
                // console.log('item',item);
                return demo(item)
            })}
            {
                cl.map(item=>{
                    // console.log("cl item", item);
                    return  createElement(item.type,item.props)
                })
            }
            <button onClick={()=>{
                setArr([].concat.call(arr, {big:123,small:Math.random()}))


                setCl([].concat.call(cl,{type:Input,
                    props:{
                        onChange: (e) => {
                            console.log(e.target.value);
                        },
                        defaultValue: 'x',

                    ref: r=>zzzz.current[no()] = r
                    },
                }))

                console.log(zzzz,no());
            }}>zzzzz</button>
            <button onClick={()=>{


                setCl([].concat.call(cl,{type:Input,
                    props:{
                        onChange: (e) => {
                            console.log(e.target.value);
                        },
                        defaultValue: Math.random()
                    }
                }))
                console.log(zzzz,no());
            }}>aasd</button>
            <Input onChange={event => {
                console.log(event.target.value);}}
            />
        </Containerx>
    );
}

export default Conpoments;